<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import {getLogin} from "@/apis/user.js";
import {useUserStore} from "@/stores/user.js";
import {useRouter} from "vue-router";

// 定义表单数据
const loginForm = ref({
  username: '',
  password: '',
});

// 表单验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, message: '用户名长度不能少于2个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' },
  ],
};

// 提交表单处理
const useUser=useUserStore()
const router=useRouter()
const handleSubmit = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      const res=await getLogin(loginForm.value)
      useUser.setToken(res.data)
      router.push('/')
      ElMessage.success('登录成功！');
    } else {
      ElMessage.error('请修正表单中的错误后再提交。');
      return false;
    }
  });
};

// 清空表单处理
const handleReset = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 控制条款对话框显示
const termsDialogVisible = ref(false);

// 打开条款对话框
const showTermsDialog = () => {
  termsDialogVisible.value = true;
};
</script>

<template>
  <div class="signupform">
    <div class="container">
      <!-- main content -->
      <div class="agile_info">
        <div class="w3l_form">
          <div class="left_grid_info">
            <h1>青松在线教育平台</h1>
            <p>‌青松在线教育平台‌是一种基于互联网的教育服务提供方式，它允许学生通过网络访问教育资源，包括视频讲座、在线课程等，以灵活的方式学习各种学科内容.</p>
            <img src="/images/image.jpg" alt="Education Image" />
          </div>
        </div>
        <div class="w3_info">
          <h2>登录您的帐户</h2>
          <p>输入您的详细信息以登录.</p>
          <el-form
              :model="loginForm"
              :rules="rules"
              ref="loginFormRef"
              label-position="top"
              label-width="auto"
          >
            <el-form-item label="用户名" prop="username">
              <el-input
                  v-model="loginForm.username"
                  placeholder="Enter Your username"
                  prefix-icon="el-icon-message"
              />
            </el-form-item>

            <el-form-item label="密码" prop="password">
              <el-input
                  v-model="loginForm.password"
                  type="password"
                  placeholder="Enter Password"
                  prefix-icon="el-icon-lock"
              />
            </el-form-item>


            <el-form-item>
              <el-button
                  type="danger"
                  @click="handleSubmit($refs.loginFormRef)"
                  block
              >Login</el-button>
              <el-button
                  type="default"
                  @click="handleReset($refs.loginFormRef)"
                  block
              >Clear</el-button>
            </el-form-item>
          </el-form>
          <p class="account">
            点击登录，即表示您同意我们的
            <a href="#" @click.prevent="showTermsDialog">条款和条件！</a>
          </p>
          <p class="account1">没有帐户？ <a href="#">在这里注册</a></p>
        </div>
      </div>
    </div>

    <!-- 条款和条件对话框 -->
    <el-dialog
        v-model="termsDialogVisible"
        title="条款和条件"
        center
        width="50%"
        :close-on-click-modal="false"
    >
      <p>欢迎使用青松在线教育平台。在使用本平台之前，请您仔细阅读以下条款和条件。</p>

      <h3>1. 使用规则</h3>
      <p>本平台提供各种在线课程和学习资源，用户需遵守平台的使用规则，不得从事任何非法或未授权的活动，包括但不限于侵犯知识产权、传播恶意软件、发布不当内容等行为。</p>

      <h3>2. 用户注册</h3>
      <p>用户在注册时需提供真实、准确的个人信息。用户账号仅供本人使用，禁止转让或借用他人。如发现账号异常使用，平台有权暂停或终止用户的账号。</p>

      <h3>3. 隐私政策</h3>
      <p>平台将严格保密用户的个人信息，除法律法规要求或用户同意外，不会向第三方泄露用户信息。平台可能会使用用户的数据进行课程优化和用户体验提升，但不会用于其他商业用途。</p>

      <h3>4. 知识产权</h3>
      <p>平台上的所有内容（包括但不限于视频、音频、文字、图片、软件等）均受版权法保护。用户不得擅自复制、下载、传播或用于商业用途，违反者将依法追究法律责任。</p>

      <h3>5. 费用和退款</h3>
      <p>部分课程或服务可能需要付费。支付后，除非课程无法正常使用或有法律规定的情况下，平台概不退款。用户在购买前请仔细阅读课程介绍和费用说明。</p>

      <h3>6. 用户责任</h3>
      <p>用户应对自己在平台上的行为负责，遵守平台的各项规定和社会公德。对于因用户行为导致的任何损失，平台不承担责任。</p>

      <h3>7. 平台责任</h3>
      <p>平台将尽力确保服务的正常运行，但对于不可抗力或技术问题导致的服务中断或数据丢失，平台不承担赔偿责任。平台保留在任何时候对服务进行修改、暂停或终止的权利。</p>

      <h3>8. 争议解决</h3>
      <p>用户与平台之间因使用本服务而产生的任何争议，双方应友好协商解决。协商不成的，任何一方均可向平台所在地的法院提起诉讼。</p>

      <p>以上条款解释权归青松在线教育平台所有。用户在使用本平台服务前，请确认已阅读并接受以上条款。</p>

      <span slot="footer" class="dialog-footer">
    <el-button @click="termsDialogVisible = false">关闭</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<style scoped>
/* 保留原有样式 */
</style>
